<template>
  <div :id="'window-'+uniqueid" :class="showWindow ? 'fadeInDown': 'fadeOutUp'" class="am-drag-wrap animated">
    <div :id="'window-header-'+uniqueid" class="drag-header">
      <div class="drag-wrap">
        <div class="drag-title">
          <!--          <span>{{ title }}</span>-->
        </div>
        <div class="drag-options">
          <span class=" icon svg-container" @click="fullScreen">
            <svg-icon icon-class="full-screen" />
          </span>
          <span class="icon svg-container" @click="closeWindow">
            <svg-icon icon-class="close" />
          </span>
        </div>
      </div>
    </div>
    <div class="drag-content">
      <div class="tabs-header-wrap">
        <div v-for="(item,index) in tabs" :key="item.component" class="tabs-header-title" :class="index === tabIndex ? 'tables-active' : ''">
          <span v-if="index === tabIndex " class="point hover" />
          <span class="title" @click="changeTabIndex(index,$event)">{{ item.title }}</span>
          <span class="icon svg-container" @click="closeTabs(index,$event)">
            <svg-icon icon-class="close" />
          </span>
        </div>
      </div>
      <div class="tabs-content-warp">
        <div v-for="(item,index) in tabs" :key="item.component" class="contentWrap" :class="index === tabIndex ? 'tables-content-active' : ''">
          <component :is="item.component" type="primary" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let _this = null
export default {
  name: 'Window',
  data() {
    return {
      isFullscreen: false,
      uniqueid: 'uniqueid',
      closeDialogVisible: false,
      showWindow: true
    }
  },

  computed: {
    tabs() {
      return this.$store.state.window.tabs
    },
    tabIndex() {
      return this.$store.state.window.index
    }
  },
  watch: {
    'tabs': function(newFlag, oldFlag) {
      console.log(newFlag)
      if (newFlag.length > 0) {
        if (_this) {
          this.showWindow = true
        }
      }
    }
    // 需要执行的代码
  },
  mounted() {
    _this = this
    const sty = this.sty()
    const dragDom = document.getElementById('window-' + this.uniqueid)
    const width = sty(dragDom, 'width').replace('px', '')
    const height = sty(dragDom, 'height').replace('px', '')
    const left = (document.body.clientWidth - width) / 2
    const top = (document.body.clientHeight - height) / 2
    dragDom.style.left = left + 'px'
    dragDom.style.top = top + 'px'

    const dialogHeaderEl = document.getElementById('window-header-' + this.uniqueid)
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth // body当前宽度
      const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)

      const dragDomWidth = dragDom.offsetWidth // 对话框宽度
      const dragDomheight = dragDom.offsetHeight // 对话框高度

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

      // 获取到的值带px 正则匹配替换
      let styL = sty(dragDom, 'left')
      let styT = sty(dragDom, 'top')

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY + 18

        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft)
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop)
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  },

  methods: {
    sty() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    },
    closeWindow(e) {
      if (this.tabs.length > 1) {
        this.$bus.emit('conformDialog', { title: '关闭所有标签', content: '当前有多个标签页面正在打开，您确定关闭所有吗？', successFn: this.handleCloseWindow })
      } else {
        this.handleCloseWindow()
      }
    },

    handleCloseWindow() {
      this.showWindow = false
      setTimeout(() => {
        // const dom = document.getElementById('window-' + this.uniqueid)
        // dom.parentNode.removeChild(dom)
        this.$store.dispatch('window/deleteTabTabs')
      }, 400)
    },

    fullScreen() {
      const dom = document.getElementById('window-' + this.uniqueid)
      if (!this.isFullscreen) {
        this.windowLeft = this.sty()(dom, 'left')
        this.windowTop = this.sty()(dom, 'top')
        this.windowWidth = this.sty()(dom, 'width')
        this.windowHeight = this.sty()(dom, 'height')
        dom.style.transition = '0.4s'
        dom.style.left = 0
        dom.style.top = 0
        dom.style.width = document.body.clientWidth + 'px'
        dom.style.height = document.body.clientHeight + 'px'
      } else {
        dom.style.left = this.windowLeft
        dom.style.top = this.windowTop
        dom.style.width = this.windowWidth
        dom.style.height = this.windowHeight
        setTimeout(() => {
          dom.style.transition = ''
        }, 500)
      }
      this.isFullscreen = !this.isFullscreen
    },
    closeTabs(index, event) {
      if (this.tabs.length < 2) {
        this.handleCloseWindow()
      }
      this.$store.dispatch('window/deleteTabIndex', index)
    },

    changeTabIndex(index) {
      if (index !== this.tabIndex) {
        this.$store.dispatch('window/changeTabIndex', index)
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.am-drag-wrap{
  width: 1000px;
  height: 600px;
  background:rgba(15, 47, 48, 0.7);
  position: absolute;
  top: 100px;
  left: 300px;
  box-shadow: 0 20px 68px rgba(0,0,0,.55);
  border:18px solid transparent;
  border-image: url("../../../assets/borderimage/table_border.png") 20 26 20 26 round;
  z-index: 500;
  display: flex;
  flex-direction: column;
  animation-duration: 0.4s;
  .drag-header{
    width: 100%;
    height: 48px;
    position: absolute;
    top: -18px;
    cursor:move;
    .drag-wrap{
      height: 30px;
      margin-top: 18px;
      line-height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 14px;
      background: rgba(15, 47, 48, 0.6) !important;
      border-bottom:1px solid #6398a1;
      .drag-title{
        color: #feff4d;
      }
    }

    .icon{
      width: 18px;
      height: 18px;
      margin-right: 2px;
      cursor: default;
      color: #fff;
      padding: 2px;
      &:hover{
        cursor: pointer;
        background: #5c99a0;
      }
    }
  }
  .drag-content{
    flex:1;
    margin-top: 30px;
    overflow-y: scroll;
    background-color: rgba(15, 47, 48, 0.1);
    display: flex;
    flex-direction: column;
  }

}

$tabHeaderHeight: 24px;

.tabs-header-wrap{
  margin-top: 5px;
  display: flex;
  flex-direction: row;

  .tables-active{
    background-color: red;
  }

  .tabs-header-title{

    margin-left: 5px;
    font-size: 14px;
    height: $tabHeaderHeight;
    padding: 0 10px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border:1px solid #fff;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    overflow: hidden;
    .point{
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: #fff;
      line-height: $tabHeaderHeight;
      display: inline-block;
    }
    .title{
      cursor: pointer;
      margin-left: 5px;
      display: inline-block;
      line-height: $tabHeaderHeight;
    }
    .svg-container{
      line-height: $tabHeaderHeight;
      display: inline-block;
      width: 20px;
      text-align: center;
      cursor: pointer;
      position: relative;
      top: 1px;

      &:hover{
        background-color: #5c99a0;
      }
    }
  }

  color: #fff;
}

  .tabs-content-warp{
    border-top: 1px solid green;
    margin-top: 5px;
    flex: 1;
    display: flex;
    .contentWrap{
      flex: 1;
      display: none;
    }
    .tables-content-active{
      display: block;
    }
  }
.test--ss{
  position: absolute;
}
</style>
